<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script>
        function f1() {
            // 获取DOM对象
            let btn = document.getElementById("btn");
            // 可以通过对象.属性的方式获取对应的DOM属性
            // 取值
            console.log("id属性:" + btn.id);
            console.log("name属性:" + btn.name);
            console.log("type属性:" + btn.type);
            console.log("value属性:" + btn.value);
            console.log("a属性:" + btn.a); // 访问不到

            // 赋值
            btn.type = "text";
            btn['id'] = "newBtn";
            btn.name = "newTest";
            btn["value"] = "newValue";
            btn.a = "10";   // 无法修改
        }

        function f2(){
            // 获取HTML属性,依然是通过DOM对象获取
            let btn = document.getElementById("btn2");

            // 取值:DOM对象.getAttribute("属性名")
            console.log("id属性:"+btn.getAttribute("id"));
            console.log("type属性:"+btn.getAttribute("type"));
            console.log("a属性:"+btn.getAttribute("a"));

            // 赋值:DOM对象.setAttribute("属性名","属性值")
            btn.setAttribute("id","btn3");
            btn.setAttribute("type","text");
            btn.setAttribute("a","10");
        }
    </script>
</head>
<body>
<input type="button" value="访问DOM属性" id="btn" name="test" a="1" onclick="f1()"><br>
<input type="button" value="访问HTML属性" id="btn2" name="test" a="1" onclick="f2()"><br>
</body>
</html>